<template>
  <div class="enterpriseReports">
    <div v-show="isList">
      <PageTitle :goBack="false" title="企业监控报告" :border="false" />
      <a-tabs v-model:activeKey="activeKey" @change="changeTabs" class="myFixed">
        <a-tab-pane :key="'DAY'" tab="监控日报" />
        <a-tab-pane :key="'WEEK'" tab="监控周报" />
        <a-tab-pane :key="'MONTH'" tab="监控月报" />
      </a-tabs>
      <div class="reportList" v-if="dataList.length">
        <div
          class="reportItem"
          v-for="(item, index) in dataList"
          :key="index"
        >
          <div class="countDiv">
            <div class="time">
              <div class="sx"></div>
              <div class="time-text">{{ item.period }}</div>
            </div>
            <div class="count-info">
              <label>共</label>
              <label style="color: #c11a20"> {{ item.companyCount || 0 }} </label>
              <label>家企业发生</label>
              <label style="color: #e49708"> {{ item.dynamicTotal || 0 }} </label>
              <label>条动态信息</label>
            </div>
          </div>
          <div class="company-list">
            <div
              class="reportInfo"
              v-for="(itemChild, indexChild) in item.companies"
              :key="indexChild"
              @click="openDetails(itemChild.companyId)"
            >
              <div class="company-icon">
                <img v-if="itemChild.logoUrl" :src="itemChild.logoUrl" alt="" />
                <img v-else src="/@/assets/images/defaultIcon.png" alt="" />
              </div>
              <div class="info">
                <div class="company-name">{{ itemChild.companyName }}</div>
                <div class="info-count">
                  <div class="countItem">
                    <label class="name">提示：</label>
                    <label style="color: #1473dc">{{ itemChild.promptCount }}</label>
                  </div>
                  <div class="countItem">
                    <label class="name">正向：</label>
                    <label style="color: #16af44">{{ itemChild.positiveCount }}</label>
                  </div>
                  <div class="countItem">
                    <label class="name">低风险：</label>
                    <label style="color: #e49708">{{ itemChild.lowRiskCount }}</label>
                  </div>
                  <div class="countItem">
                    <label class="name">中风险：</label>
                    <label style="color: #c15a1a">{{ itemChild.middleRiskCount }}</label>
                  </div>
                  <div class="countItem">
                    <label class="name">高风险：</label>
                    <label style="color: #c11a20">{{ itemChild.highRiskCount }}</label>
                  </div>
                </div>
              </div>
              <div class="add-info">
                <label style="color: #909399">新增</label>
                <label style="color: #232323"> {{ itemChild.dynamicTotal }} </label>
                <label style="color: #909399">条动态信息</label>
              </div>
            </div>
            <a-pagination
              size="small"
              :total="pageForm.total"
              :pageSize="pageForm.size"
              :current="pageForm.limit"
              :hideOnSinglePage="true"
              :showSizeChanger="false"
              @change="changePage"
              style="margin-top: 10px; float: right"
            />
          </div>
        </div>
      </div>
      <div class="noDataDiv" v-else>
        <a-empty />
      </div>
    </div>
    <div v-if="!isList" class="reportInfo">
      <PageTitle
        :goBack="true"
        title="监控报告详情"
        :border="true"
        :back-type="false"
        @go-back="backList"
      />
      <div class="myCardCss" style="width: 100%">
        <div class="title">
          <img v-if="companyInfo.logoUrl" :src="companyInfo.logoUrl" alt="" style="width: 28px; height: 28px" />
          <img v-else src="/@/assets/images/defaultIcon.png" alt="" style="width: 28px; height: 28px" />
          <label>{{ companyInfo.companyName }}</label>
        </div>
        <div class="info">
          <label class="infoItem">法定代表人：{{ companyInfo.operName }}</label>
          <label class="infoItem"
            >注册资本：{{ companyInfo.regCapital }}{{ companyInfo.regUnit }}（人民币）</label
          >
          <label class="infoItem">成立日期：{{ companyInfo.startDate }}</label>
        </div>
        <div class="borderDiv"></div>
        <a-form class="myForm1" :model="formData" :label-col="{ span: 2 }" :wrapper-col="12">
          <a-form-item label="更新时间" style="margin-top: 16px; margin-bottom: 4px">
            <a-radio-group name="radioGroup" v-model:value="formData.time">
              <a-radio :value="1">今天</a-radio>
              <a-radio :value="2">近三天</a-radio>
              <a-radio :value="3">近一周</a-radio>
              <a-radio :value="4">近半月</a-radio>
              <a-radio :value="5">近一个月</a-radio>
              <a-radio :value="0">自定义日期</a-radio>
            </a-radio-group>
            <a-range-picker
              v-if="formData.time === 0"
              v-model:value="formData.times"
              format="YYYY-MM-DD"
              valueFormat="YYYY-MM-DD"
            />
          </a-form-item>
          <a-form-item label="风险类型" style="margin-bottom: 4px">
            <a-checkbox
              v-model:checked="checkAll"
              :indeterminate="indeterminate"
              @change="onCheckAllChange"
            >
              全部
            </a-checkbox>
            <a-checkbox
              v-model:checked="checkAll1"
              :indeterminate="indeterminate1"
              @change="onCheckAllChange1"
            >
              工商风险
            </a-checkbox>
            <a-checkbox
              v-model:checked="checkAll2"
              :indeterminate="indeterminate2"
              @change="onCheckAllChange2"
            >
              司法风险
            </a-checkbox>
          </a-form-item>
          <a-form-item label="风险维度" style="margin-bottom: 4px" v-if="checkAll1">
            <a-checkbox-group v-model:value="formData.riskDimensions1" @change="setData(1)">
              <a-checkbox
                :value="item.dimensionName"
                name="type1"
                v-for="(item, index) in list1"
                :key="index"
                >{{ item.dimensionName }}</a-checkbox
              >
            </a-checkbox-group>
          </a-form-item>
          <a-form-item label="风险维度" style="margin-bottom: 4px" v-if="checkAll2">
            <a-checkbox-group v-model:value="formData.riskDimensions2" @change="setData(2)">
              <a-checkbox
                :value="item.dimensionName"
                name="type2"
                v-for="(item, index) in list2"
                :key="index"
                >{{ item.dimensionName }}</a-checkbox
              >
            </a-checkbox-group>
          </a-form-item>
          <a-form-item label="风险级别" style="margin-bottom: 4px">
            <a-checkbox @change="changeAny1" :value="any1" :checked="checked1" name="type"
              ><span style="width: 28px; display: block">不限</span></a-checkbox
            >
            <a-checkbox-group
              @change="changeOther1"
              v-model:value="formData.riskLevels"
              :options="options1"
            />
            <!-- <a-checkbox-group v-model:value="formData.riskLevels" @change="setData(4)">
              <a-checkbox value="不限" name="type">不限</a-checkbox>
              <a-checkbox value="提示" name="type" :disabled="formData.riskLevels.filter(item => item === '不限').length">提示</a-checkbox>
              <a-checkbox value="正向" name="type" :disabled="formData.riskLevels.filter(item => item === '不限').length">正向</a-checkbox>
              <a-checkbox value="低风险" name="type" :disabled="formData.riskLevels.filter(item => item === '不限').length">低风险</a-checkbox>
              <a-checkbox value="中风险" name="type" :disabled="formData.riskLevels.filter(item => item === '不限').length">中风险</a-checkbox>
              <a-checkbox value="高风险" name="type" :disabled="formData.riskLevels.filter(item => item === '不限').length">高风险</a-checkbox>
            </a-checkbox-group> -->
          </a-form-item>
          <a-button
            type="primary"
            danger
            style="margin-right: 12px; border-radius: 4px"
            @click="searchData"
            >查询</a-button
          >
          <a-button @click="resetData" style="border-radius: 4px">重置</a-button>
        </a-form>
      </div>
      <div class="myCardCss" style="width: 100%; margin-top: 8px">
        <a-table
          :dataSource="detailsList"
          :columns="detailsColumns"
          :pagination="false"
          :scroll="{ y: 500 }"
        >
          <template #index="{ index }">
            {{ index + 1 }}
          </template>
          <template #details="{ record }">
            <div class="myContent">
              <div v-for="(value, key) of JSON.parse(record.details)" :key="key">
                <div
                  ><label v-if="key !== '内容'">{{ key }}: </label> {{ value }}</div
                >
              </div>
            </div>
          </template>
          <template #operation="{ record }">
            <a
              class="xqBtn"
              :class="!showGotoDetail(record) ? 'active' : ''"
              @click="openDetailsForDetails(record)"
              >详情</a
            >
          </template>
        </a-table>
      </div>
      <a-pagination
        size="small"
        :total="pageFormByDetails.total"
        :pageSize="pageFormByDetails.size"
        :current="pageFormByDetails.limit"
        :hideOnSinglePage="true"
        :showSizeChanger="false"
        @change="changePageByDetails"
        style="margin-top: 10px; float: right"
      />
    </div>
    <monitoringDetail
      v-if="state.detailVisible"
      :visible="state.detailVisible"
      :detail="state.detailObject"
      @close="closeDetailDialog"
    />
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, watch } from 'vue';
  import PageTitle from '/@/components/PageTitle/index.vue';
  import monitoringDetail from '../monitoringDynamics/detail.vue';
  import {
    getRiskRecord,
    getRiskReport,
    getCompanyInfo,
    getOptions,
  } from '/@/api/monitoringCenter';
  import { getTimes, setTimes } from '/@/utils';
  let isList = ref(true);
  let activeKey = ref('DAY');
  let pageForm = ref({
    size: 10,
    limit: 1,
    total: 0,
  });
  let dataList = ref([]);
  function changePage(val) {
    pageForm.value.limit = val;
    // todo
    getList();
  }
  function changeTabs() {
    pageForm.value.limit = 1;
    getList();
  }
  async function getList() {
    let queryData = {
      type: activeKey.value,
      size: pageForm.value.size,
      limit: pageForm.value.limit,
    };
    const res = await getRiskReport(queryData);
    dataList.value = res.list;
    pageForm.value.total = res.total;
  }
  getList();

  let checked1 = ref(false);
  let any1 = ref('');
  let options1 = ref(['提示', '正向', '低风险', '中风险', '高风险']);
  const changeAny1 = () => {
    checked1.value = !checked1.value;
    formData.value.riskLevels = [];
  };
  const changeOther1 = () => {
    checked1.value = false;
  };

  let optionsList = ref([]);
  let list1 = ref([]);
  let list2 = ref([]);
  // 监控动态下拉
  async function getSeletOpition() {
    const res = await getOptions();
    optionsList.value = res;
    list1.value = res[0].children;
    list2.value = res[1].children;
  }
  getSeletOpition();

  // 查看详情
  let companyId = '';
  function openDetails(id: string) {
    companyId = id;
    isList.value = false;
    pageFormByDetails.value.limit = 1;
    getListDetails();
    getInfo();
  }
  function backList() {
    isList.value = true;
  }

  let formData = ref({
    parentDimension: [], // 风险类型
    dimensions: [], // 所有风险维度
    riskLevels: [], // 风险级别
    time: -1,
    times: [],
    riskType: [],
    riskType1: [],
    riskType2: [],
    riskDimensions1: [],
    riskDimensions2: [],
    riskDimensions: [],
  });
  let detailsList = ref([]);
  let detailsColumns = ref([
    {
      title: '序号',
      align: 'center',
      slots: { customRender: 'index' },
    },
    {
      title: '监控对象',
      dataIndex: 'companyName',
      key: 'companyName',
      align: 'center',
    },
    {
      title: '风险级别',
      dataIndex: 'riskLevel',
      key: 'riskLevel',
      align: 'center',
    },
    {
      title: '监控类型',
      dataIndex: 'dimensionName',
      key: 'dimensionName',
      align: 'center',
    },
    {
      title: '动态内容',
      dataIndex: 'details',
      key: 'details',
      width: '500px',
      slots: { customRender: 'details' },
    },
    {
      title: '更新时间',
      dataIndex: 'createTime',
      key: 'createTime',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      slots: { customRender: 'operation' },
      align: 'center',
    },
  ]);
  let pageFormByDetails = ref({
    size: 50,
    limit: 1,
    total: 0,
  });
  function changePageByDetails(val) {
    pageFormByDetails.value.limit = val;
    // todo
    getListDetails();
  }
  function searchData() {
    pageFormByDetails.value.limit = 1;
    getListDetails();
  }
  function resetData() {
    checked1.value = false;
    checkAll.value = false;
    checkAll1.value = false;
    checkAll2.value = false;
    indeterminate.value = false;
    indeterminate1.value = false;
    indeterminate2.value = false;
    pageFormByDetails.value.limit = 1;
    formData.value = {
      parentDimension: [], // 风险类型
      dimensions: [], // 所有风险维度
      riskLevels: [], // 风险级别
      time: -1,
      times: [],
      riskType: [],
      riskType1: [],
      riskType2: [],
      riskDimensions1: [],
      riskDimensions2: [],
      riskDimensions: [],
    };
    getListDetails();
  }
  let companyInfo = ref();
  // 获取公司详情
  async function getInfo() {
    const res = await getCompanyInfo(companyId);
    companyInfo.value = res;
  }
  async function getListDetails() {
    let riskDimensions = formData.value.riskDimensions1.concat(formData.value.riskDimensions2);
    let riskLevels = formData.value.riskLevels.filter((item) => item === '不限').length
      ? ''
      : formData.value.riskLevels.toString();
    let startTime = '';
    let endTime = '';
    if (formData.value.time === 0 && formData.value.times && formData.value.times.length === 2) {
      // 自定义日期
      startTime = formData.value.times[0];
      endTime = formData.value.times[1];
    } else {
      startTime = getTimes(formData.value.time)[0];
      endTime = getTimes(formData.value.time)[1];
    }
    let queryData = {
      companyId: companyId,
      limit: pageFormByDetails.value.limit,
      size: pageFormByDetails.value.size,
      riskLevels,
      dimensions: riskDimensions.toString(),
      startTime,
      endTime,
    };
    let res = await getRiskRecord(queryData);
    detailsList.value = res.list.map((item) => {
      item.createTime = setTimes(Number(item.createTime));
      return item;
    });
    pageFormByDetails.value.total = res.total;
  }
  const state: {
    detailVisible: boolean;
    detailObject: any;
  } = reactive({
    detailVisible: false,
    detailObject: null,
  });
  function openDetailsForDetails(detailObject) {
    state.detailObject = detailObject;
    openDetailDialog();
  }
  const showGotoDetail = (record) => {
    return [
      '新增开庭公告',
      '新增法院公告',
      '新增裁判文书',
      '新增经营异常',
      '新增失信被执行人',
      '新增股权冻结',
    ].includes(record.dimensionName);
  };

  const openDetailDialog = () => {
    state.detailVisible = true;
  };
  const closeDetailDialog = () => {
    state.detailVisible = false;
  };

  let checkAll = ref(false);
  let indeterminate = ref(false);
  let checkAll1 = ref(false);
  let indeterminate1 = ref(false);
  let checkAll2 = ref(false);
  let indeterminate2 = ref(false);
  const onCheckAllChange = (e: any) => {
    if (e.target.checked) {
      checkAll.value = true;
      indeterminate.value = false;
      checkAll1.value = true;
      indeterminate1.value = false;
      checkAll2.value = true;
      indeterminate2.value = false;
      formData.value.riskDimensions1 = list1.value.map((item) => item.dimensionName);
      formData.value.riskDimensions2 = list2.value.map((item) => item.dimensionName);
    } else {
      checkAll.value = false;
      indeterminate.value = false;
      checkAll1.value = false;
      indeterminate1.value = false;
      checkAll2.value = false;
      indeterminate2.value = false;
      formData.value.riskDimensions1 = [];
      formData.value.riskDimensions2 = [];
    }
  };
  const onCheckAllChange1 = (e: any) => {
    if (e.target.checked) {
      formData.value.riskDimensions1 = list1.value.map((item) => item.dimensionName);
      checkAll1.value = true;
      indeterminate1.value = false;
      if (checkAll2.value) {
        checkAll.value = true;
        indeterminate.value = false;
      } else {
        checkAll.value = true;
        indeterminate.value = true;
      }
    } else {
      formData.value.riskDimensions1 = [];
      checkAll1.value = false;
      indeterminate1.value = false;
      if (!checkAll2.value) {
        checkAll.value = false;
        indeterminate.value = false;
      } else {
        checkAll.value = true;
        indeterminate.value = true;
      }
    }
  };
  const onCheckAllChange2 = (e: any) => {
    if (e.target.checked) {
      formData.value.riskDimensions2 = list2.value.map((item) => item.dimensionName);
      checkAll2.value = true;
      indeterminate2.value = false;
      if (checkAll1.value) {
        checkAll.value = true;
        indeterminate.value = false;
      } else {
        checkAll.value = true;
        indeterminate.value = true;
      }
    } else {
      formData.value.riskDimensions2 = [];
      checkAll2.value = false;
      indeterminate2.value = false;
      if (!checkAll1.value) {
        checkAll.value = false;
        indeterminate.value = false;
      } else {
        checkAll.value = true;
        indeterminate.value = true;
      }
    }
  };

  function setData(type: number) {
    if (type === 1) {
      if (formData.value.riskDimensions1.length === 0) {
        checkAll1.value = false;
        indeterminate1.value = false;
        if (!checkAll2.value) {
          checkAll.value = false;
          indeterminate.value = false;
        }
        return;
      }
      if (formData.value.riskDimensions1.length === list1.value.length) {
        checkAll1.value = true;
        indeterminate1.value = false;
        if (formData.value.riskDimensions2.length === list2.value.length) {
          checkAll.value = true;
          indeterminate.value = false;
        }
      } else {
        checkAll1.value = true;
        indeterminate1.value = true;
        checkAll.value = true;
        indeterminate.value = true;
      }
    }
    if (type === 2) {
      if (formData.value.riskDimensions2.length === 0) {
        checkAll2.value = false;
        indeterminate2.value = false;
        if (!checkAll1.value) {
          checkAll.value = false;
          indeterminate.value = false;
        }
        return;
      }
      if (formData.value.riskDimensions2.length === list2.value.length) {
        checkAll2.value = true;
        indeterminate2.value = false;
        if (formData.value.riskDimensions1.length === list1.value.length) {
          checkAll.value = true;
          indeterminate.value = false;
        }
      } else {
        checkAll2.value = true;
        indeterminate2.value = true;
        checkAll.value = true;
        indeterminate.value = true;
      }
    }
  }
</script>
<style lang="less" scoped>
  .reportList {
    .reportItem {
      background: #ffffff;
      margin-bottom: 8px;
      padding: 16px;
      .countDiv {
        display: flex;
        justify-content: space-between;
        .time {
          display: flex;
          .sx {
            width: 2px;
            height: 14px;
            background: #c11a20;
            margin-right: 8px;
            margin-top: 4px;
          }
          .time-text {
            font-size: 14px;
            font-weight: 500;
            color: #303133;
          }
        }
        .count-info {
          font-size: 14px;
          color: #606266;
        }
      }
      .company-list {
        .reportInfo {
          border-bottom: 1px solid #dcdfe6;
          display: flex;
          position: relative;
          padding: 16px;
          .add-info {
            position: absolute;
            right: 0px;
            top: 50%;
            transform: translateY(-50%);
          }
          .company-icon {
            margin-right: 12px;
            img {
              width: 62px;
              height: 62px;
              border-radius: 4px;
            }
          }
          .info {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .company-name {
              font-size: 16px;
              font-weight: 500;
              color: #303133;
              margin-bottom: 8px;
            }
            .info-count {
              display: flex;
              .countItem {
                margin-right: 24px;
                .name {
                  color: #909399;
                }
              }
            }
          }
        }
      }
    }
  }
  .reportInfo {
    .title {
      display: flex;
      img {
        margin-right: 12px;
      }
      font-size: 18px;
      font-weight: 500;
      line-height: 26px;
      color: #303133;
    }
    .info {
      font-size: 14px;
      line-height: 22px;
      letter-spacing: -0.01px;
      color: #909399;
      margin-top: 12px;
      .infoItem {
        margin-right: 12px;
      }
    }
    .borderDiv {
      width: 100%;
      height: 1px;
      background: #dcdfe6;
      margin-top: 16px;
    }
  }
  :deep {
    .ant-tabs-nav {
      background: #ffffff;
      margin-bottom: 0px;
      padding-left: 16px;
    }
  }
  .xqBtn {
    color: #1473dc;
  }
  .xqBtn.active {
    color: #d8d8d8;
    pointer-events: none;
  }
  :deep(.myForm1) {
    .ant-form-item-label {
      flex: 0 0 auto;
    }
  }
  .myFixed {
    position: fixed;
    z-index: 10;
    width: calc(100% - 258px);
    background: #ffffff;
  }
</style>
